<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Lord Ford</title>
		<link rel="shortcut icon" href="images/favicon.png">

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

		<!-- Custom CSS -->
		<link href="css/style.css" rel="stylesheet" media="screen">

		<!-- Owl Carousel stylesheet -->
		<link href="css/owl.carousel.css" rel="stylesheet">

		<!-- Owl Carousel Default Theme -->
		<link href="css/owl.theme.css" rel="stylesheet">

		<!-- Fancybox -->
		<link href="css/jquery.fancybox.css" rel="stylesheet">

		<!-- Google Fonts -->
		<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|Bree+Serif" rel="stylesheet">

		<!-- Font Awesome Icons -->
		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css" rel="stylesheet">

		<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
		<script src="js/respond.min.js"></script>
		<![endif]-->

		<!-- Google Map CSS -->
		<style type="text/css">
			html, body {height: 100%;}
			#map-canvas { height: 60%;}
		</style>

		<!-- Google Map Script -->
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoRMxiPsqJ9SUuaK1KsCAjd3gqnecjlBw&amp;sensor=false"></script>
		<script type="text/javascript">

			function initialize() {

				// Create an array of styles.
				var styles = [
					{
						stylers: [
							{ hue: "#ffd200" },
							{ saturation: 0 }
						]
					},{
						featureType: "road",
						elementType: "geometry",
						stylers: [
							{ lightness: 100 },
							{ visibility: "simplified" }
						]
					},{
						featureType: "road",
						elementType: "labels",
						stylers: [
							{ visibility: "off" }
						]
					}
				];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});


				var mapOptions = {
					zoom: 4,
					center: new google.maps.LatLng(51.4597167, 14.6256667),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
				}
				var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

				//Associate the styled map with the MapTypeId and set it to display.
				map.mapTypes.set('map_style', styledMap);
				map.setMapTypeId('map_style');

				setMarkers(map, places);
			}

			var places = [
				['Moscow', 55.7600667, 37.6194667, 1],
				['Warsaw', 52.2393167, 21.0214167, 1],
				['Berlin', 52.52665, 13.3858, 1],
				['Paris', 48.8582333, 2.3518167, 1]
			];

			function setMarkers(map, locations) {
				// Add markers to the map
				var image = {
					url: 'images/marker.png',
					// This marker is 40 pixels wide by 42 pixels tall.
					size: new google.maps.Size(40, 42),
					// The origin for this image is 0,0.
					origin: new google.maps.Point(0,0),
					// The anchor for this image is the base of the pin at 20,42.
					anchor: new google.maps.Point(20, 42)
				};

				for (var i = 0; i < locations.length; i++) {
					var place = locations[i];
					var myLatLng = new google.maps.LatLng(place[1], place[2]);
					var marker = new google.maps.Marker({
						position: myLatLng,
						map: map,
						icon: image,
						title: place[0],
						zIndex: place[3],
						animation: google.maps.Animation.DROP
					});

					var contentString = "Some content";
					google.maps.event.addListener(marker, "click", function() {
						infowindow.setContent(this.html);
						infowindow.open(map, this);
					});
				}
			}

			google.maps.event.addDomListener(window, 'load', initialize);
		</script>

	</head>
	<body>

		<!-- Fixed navbar -->
		<div class="navbar navbar-inverse navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html"><img src="images/logoLF.png" alt="Perfekta. Multipurpose Site Theme." class="img-responsive" /></a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
					
					
						<li class="dropdown">
							<li><a href="index.html">Home</a></li>
						</li>
						
						
						<li class="dropdown">
							<li><a href="about.html">About Us</a></li>
						</li>
						
						
					
						
						
						<li class="dropdown">
							<li><a href="shop.html">Our Products</a></li>
						</li>
						
						
						
						
					
						
						<li class="dropdown">
							<li><a href="contact.html">Contact Us</a></li>
						</li>
						
						
					</ul>
				</div><!--/.nav-collapse -->
			</div><!--/.container -->
		</div><!--/.navbar -->

		<div id="map-canvas"></div>

		<!-- Content Start -->
		<div class="container">
			<div class="row row-margin no-fade">
				<div class="col-sm-8">
					<h3>Contact Form</h3>

					<!-- Form Start -->
					<form role="form">
						<div class="form-group">
							<label for="yourname">Name</label>
							<input type="text" class="form-control" id="yourname" placeholder="John Doe">
						</div>
						<div class="form-group">
							<label for="email">Email</label>
							<input type="email" class="form-control" id="email" placeholder="name@domain.com">
						</div>
						<div class="form-group">
							<label for="message">Message</label>
							<textarea class="form-control" id="message" rows="6"></textarea>
						</div>
						<button type="submit" class="btn btn-primary btn-lg">Submit</button>
					</form>
					<!-- Form End -->

				</div>
				<div class="col-sm-4">
					<h3>Locations</h3>
					<div class="row no-fade">

						

						<div class="col-sm-6">
							<address>
								<b>Lord Ford Inc.</b><br>
								Montréal, Canada, QC <br>
								H4N 2R5
							</address>
							<p>
								<i class="fa fa-phone"></i> &nbsp;(514) 381-9898<br>
								<i class="fa fa-print"></i> &nbsp;(514) 381-2018<br>
								<i class="fa fa-envelope"></i> &nbsp; <a href="#">info@company.com</a>
							</p>
						</div>

					</div>
					
				</div>
			</div>
		</div>
		<!-- Content End -->
<!-- Prefooter Start -->
		<div class="prefooter">
			<div class="container">
			
			
				<div class="row">
				
					<div class="col-sm-4 footer-photos">
						<h5>General information</h5>
						<ul>
							<img src="images/warehouseFoot.jpg" alt="" />
						</ul>
						<div class="clear"></div>
					</div>
					
					
					
				
					
					<div class="col-sm-4 footer-photos">
						<h5>-</h5>
						<ul>
							<iframe width="360" height="234" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ca/maps?q=1493+Rue+Antonio-barbeau,+Montr%C3%A9al&amp;layer=c&amp;sll=45.531883,-73.656101&amp;cbp=13,166.3,,0,6.08&amp;cbll=45.531879,-73.655957&amp;hl=en&amp;ie=UTF8&amp;hq=&amp;hnear=1493+Rue+Antonio+Barbeau,+Montr%C3%A9al,+Qu%C3%A9bec+H4N+2R5&amp;ll=45.531883,-73.656101&amp;spn=0.006802,0.009645&amp;t=m&amp;z=14&amp;panoid=KJo1UPg0sSYnQa61rgt6Hw&amp;source=embed&amp;output=svembed"></iframe><br /><small><a href="https://maps.google.ca/maps?q=1493+Rue+Antonio-barbeau,+Montr%C3%A9al&amp;layer=c&amp;sll=45.531883,-73.656101&amp;cbp=13,166.3,,0,6.08&amp;cbll=45.531879,-73.655957&amp;hl=en&amp;ie=UTF8&amp;hq=&amp;hnear=1493+Rue+Antonio+Barbeau,+Montr%C3%A9al,+Qu%C3%A9bec+H4N+2R5&amp;ll=45.531883,-73.656101&amp;spn=0.006802,0.009645&amp;t=m&amp;z=14&amp;panoid=KJo1UPg0sSYnQa61rgt6Hw&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
						</ul>
						<div class="clear"></div>
					</div>
					
					
					
					<div class="col-sm-4 footer-contact">
						<h5>-</h5>
						<ul>
							<li>
								<address>
									<i class="fa fa-map-marker"></i>
									<p>
										<span>Address:</span>
										<br>1493 Rue Antonio-barbeau
										<br>Montréal, Canada, QC  H4N 2R5
									</p>
								</address>
							</li>
							<li>
								<i class="fa fa-phone"></i>
								<p><span>Phone:</span>  (514) 381-9898</p>
							</li>
							<li>
								<i class="fa fa-print"></i>
								<p><span>Fax:</span>  (514) 381-2018</p>
							</li>
							<li>
								<i class="fa fa-envelope"></i>
								<p><span>Email:</span> <a href="mailto:name@domain.com">name@domain.com</a></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		
		<!-- Prefooter End -->

		<!-- Footer Start -->
		<footer>
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						&copy; 2014 Lord Ford. Web Design &amp; Development by <a href="#" target="_blank">The Mj Web Solutions</a>.
					</div>
					<div class="col-sm-6">
						<ul>
							<li><a href="http://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
							<li><a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
							<li><a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></li>
							<li><a href="http://tumblr.com/" target="_blank"><i class="fa fa-tumblr"></i></a></li>
							<li><a href="http://dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
							<li><a href="http://xing.com/" target="_blank"><i class="fa fa-xing"></i></a></li>
							<li><a href="http://youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a></li>
						</ul>
					</div>
				</div>
			</div>
		</footer>
		<!-- Footer Start -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="http://code.jquery.com/jquery.js"></script>

		<!-- Bootstrap Plugins -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Retina Plugin -->
		<script src="js/retina-1.1.0.min.js"></script>

		<!-- Owl Carousel Plugin -->
		<script src="js/owl.carousel.js"></script>

		<!-- Fancybox Plugin -->
		<script src="js/jquery.fancybox.js"></script>

		<!-- Bootstrap Progress Bar -->
		<script src="js/bootstrap-progressbar.js"></script>

		<!-- MixItUp Plugin -->
		<script src="js/jquery.mixitup.js"></script>

		<!-- Settings -->
		<script src="js/settings-inner.js"></script>
		
	</body>
</html>